<template>
	<!-- :style="{'bottom': launchOpen ?'0px' :'-100vh'}" -->
	<div class="box"   v-if="launchOpen">
		<view class="buildTalk" style="opacity: 0;">
			<image src="../../static/img/temp.png" mode=""></image>
			
			<text>发起你感兴趣的话题</text>
		</view>
		
		<view class="ops">
			<view class="item-list">
				<view class="item" @click="toBuild">
					<view class="wrap" style="background-color: #FFEC8B;border-radius: 50%;display: flex; align-items: center;justify-content: center;"><image src="../../static/img/zanzhu.png" mode=""></image></view>
					<view><text>发起公益项目</text></view>
				</view>
				<view class="item">
					<view class="wrap" style="background-color: #5CACEE;border-radius: 50%;display: flex; align-items: center;justify-content: center;"><image src="../../static/img/shu-copy-copy.png" mode=""></image></view>
					<view><text>发起公益文章</text></view>
				</view>
				<view class="item">
					<view class="wrap" style="background-color: #FFA07A;border-radius: 50%;display: flex; align-items: center;justify-content: center;"><image src="../../static/img/badaxilietubiao05-copy.png" mode=""></image></view>
					<view><text>创建社团</text></view>
				</view>
				<view class="item">
					<view class="wrap" style="background-color: #8EE5EE;border-radius: 50%;display: flex; align-items: center;justify-content: center;"><image src="../../static/img/v2_q3s30k.png" mode="" class="ot"></image></view>
					<view><text>发起动态</text></view>
				</view>
			</view>
		</view>
		
		<!-- <view class="other">
			<text class="title">来自你关注 公益图书角的话题</text><br>
			<text class="content">
				分享就是分享知识，这么神圣的事情，大家赶快把你们用不到的书，分享给需要他的人。
			</text>
		</view> -->
		
		<!-- <div class="have">
			我包含：
			<navigator url="./launchIdle">发布闲置物捐赠</navigator>
			<navigator url="./launchHeart">发布爱心募资</navigator>
			<navigator url="./launchFarewell">发布公益项目</navigator>
			<navigator url="./launchTalk">发布话题</navigator>
		</div> -->
	</div>
</template>

<script>
	export default {
		data () {
			return {
				box: null,
				isShow: false
			}
		},
		computed: {
			launchOpen () {
				return this.$store.state.launchOpen
			}
		},
		methods: {
			toBuild () {
				uni.navigateTo({
					url: "../launch/launchFarewell"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		min-height: 100vh;
		overflow: hidden;
		// transition: bottom ease .3s;
		background-color: $defaultBack;
		
		.buildTalk {
			width: 520rpx;
			height: 112rpx;
			margin: 160rpx auto;
			background-color: rgba(237, 237, 237, 1);
			display: flex;
			align-items: center;
			
			& > image {
				width: 72rpx;
				height: 72rpx;
				margin-left: 18rpx;
			}
			
			text {
				flex: 1;
				font-size: $middleFont;
				color: $shallowColor;
				font-weight: bold;
				text-align: center;
				margin-left: -18rpx;
			}
		}
		
		.ops {
			width: 580rpx;
			margin: 0 auto;
			.item-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				
				.item {
					text-align: center;
					margin: 18rpx;
					
					.wrap {
						width: 136rpx;
						height: 136rpx;
						
						image {
							width: 100rpx;
							height: 100rpx;
						}
						
						.ot {
							width: 80rpx;
							height: 80rpx;
						}
					}
					
					text {
						font-size: $smallFont;
						color: $shallowColor;
						font-weight: bold;
					}
				}
			}
		}
		
		.other {
			width: 630rpx;
			box-shadow: $viewShadow;
			background: #fff;
			margin: 72rpx auto;
			padding: 18rpx;
			
			.title {
				font-size: $smallFont;
				font-weight: bold;
			}
			
			.content {
				margin-top: $smallMargin;
				display: block;
				font-size: 24rpx;
				color: $subColor;
				text-indent: 2em;
			}
		}
	}
</style>
